<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="login()">POST /login</button>
    <button onclick="getPosts()">GET /posts</button>
    <button onclick="getPostsById(2)">GET /posts/:id</button>

    <button onclick="addPostsJSON()">(JOSN) POST /posts</button>
    <button onclick="updatePostsById(2)">(JOSN) PATCH /posts/:id</button>
    <button onclick="deletePostsById(2)">DELETE /posts/:id</button>

    <script src="./axios.js"></script>
    <script>
      /*
        axios对象方法参数：
        1. url 路由地址
        2. 报文主体 GET,DELETE请求可以省略
        3. 配置项
          ① params 配置查询参数
          ② headers 配置报文头部字段
        复制克隆了axios，axios 实例
        1. 配置公共URL部分baseURL
        2. 配置公共header部分
        3. 局部配置项优先生效，同名全局配置项会被局部覆盖，经常被用于部分请求单独（特例）设置
      */
      // let token = ""; //保存令牌
      // 本地存储
      // localStorage.token = "";

      // 复制克隆了axios，全局配置项
      const request = axios.create({
        baseURL: "http://127.0.0.1:3008",
        headers: {
          authorization: localStorage.token,
        },
      });
      // request.default.baseURL = ''
      // request.default.headers.common['content-type'] = 'application/json'
      // request.default.headers.post['content-type'] = 'text/html'
      function login() {
        request
          .post("/login", {
            username: "jack",
            password: "123123",
          })
          .then((res) => {
            localStorage.token = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
      // query string查询字符串传参
      function getPosts() {
        request
          .get("/posts", {
            params: { id_gte: 2, id_lte: 5 },
          })
          .then((res) => {
            console.log(res);
          })
          .catch((e) => {
            console.log(e);
          });
      }
      // path 路径传参
      function getPostsById(id) {
        request
          .get(`/posts/${id}`)
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
      // 报文主体（JOSN）传参
      function addPostsJSON() {
        request
          .post("/posts", {
            author: "tom",
            title: "hello tome",
          })
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
      }
      // path 路径传参+报文主体（JOSN）传参
      function updatePostsById(id) {
        request
          .patch(`/posts/${id}`, {
            title: "hahaha ...",
          })
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
      }
      // path 路径传参
      function deletePostsById(id) {
        request
          .delete(`/posts/${id}`)
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
      }
    </script>
  </body>
</html>
